<template>
  <div>
    <el-card>
      <div v-show="scene == 0">
        <el-button
          type="primary"
          icon="el-icon-plus"
          style="margin-bottom: 10px"
          @click="add"
        >
          添加
        </el-button>
        <el-table style="width: 100%" border :data="list">
          <el-table-column
            type="index"
            label="序号"
            width="80px"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="gamename"
            label="相关游戏"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="new_content"
            label="咨讯内容"
            width="width"
            align="center"
          >
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.new_content" placement="top">
                <p class="showOverTooltip">{{ scope.row.new_content }}</p>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="url"
            label="咨讯图片"
            width="width"
            align="center"
          >
            <template slot-scope="{ row, $index }">
              <img :src="row.url" style="width: 100px; height: 100px" />
            </template>
          </el-table-column>

          <el-table-column
            prop="prop"
            label="操作"
            width="width"
            align="center"
          >
            <template slot-scope="{ row, $index }">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteNews(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog title="添加资讯" :visible.sync="dialogFormVisible">
        <el-form
          style="width: 80%"
          :model="newsForm"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item prop="gamename" label="相关游戏" label-width="100px">
            <el-input autocomplete="off" v-model="newsForm.gamename"></el-input>
          </el-form-item>
          <el-form-item prop="new_content" label="资讯内容" label-width="100px">
            <el-input
              type="textarea"
              autocomplete="off"
              v-model="newsForm.new_content"
            ></el-input>
          </el-form-item>
          <el-form-item prop="url" label="资讯图片" label-width="100px">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/api/upLoadPage"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="newsForm.url" :src="newsForm.url" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addorUpdate('ruleForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog></el-card
    >
  </div>
</template>

<script>
export default {
  name: "News",
  data() {
    return {
      list: [],
      pageUrl: "",
      scene: 0,
      dialogFormVisible: false,
      newsForm: {
        gamename: "",
        new_content: "",
        url: "",
      },
      rules: {
        gamename: [
          { required: true, message: "请输入相关游戏", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度要在 2 到 20个字符",
            trigger: "change",
          },
        ],
        new_content: [{ required: true, message: "请输入资讯内容" }],
        url: [{ required: true, message: "请选择图片" }],
      },
    };
  },
  mounted() {
    this.getPageList();
  },
  methods: {
    async getPageList() {
      let result = await this.$API.news.getNews();
      if (result.code == 200) {
        this.list = result.data;
      }
    },
    add() {
      this.dialogFormVisible = true;
      // 每次点开都清空
      this.newsForm = { gamename: "", new_content: "", url: "" };
    },
    deleteNews(row) {
      this.$confirm(`你确定删除${row.gamename}的相关资讯吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let result = await this.$API.news.deleteNews({ id: row.id });
          if (result.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getPageList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 图片上传成功
    handleAvatarSuccess(res, file) {
      // res 上传成功之后返回前端数据
      // file 上传成功之后服务器返回前端数据
      this.newsForm.url = URL.createObjectURL(file.raw);
      this.pageUrl = file.response.data.src;
    },
    // 图片上传之前
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isJPG2 = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      if (!isJPG && !isJPG2 && !isPNG)
        this.$message.error("请上传格式为 png, jpg, jpeg 的图片！");

      return isJPG || isJPG2 || isPNG;
    },
    // 添加或修改资讯
    addorUpdate(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          let result = await this.$API.news.addNews({
            gamename: this.newsForm.gamename,
            new_content: this.newsForm.new_content,
            url: this.pageUrl,
          });
          if (result.code == 200) {
            this.$message.success("添加资讯成功");
            this.getPageList();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
/* 只显示三行 */
.showOverTooltip {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  /*这里是3行*/
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
